/**
* 调查问卷
*/
<template>
	<view>
		<cu-custom bgColor="v-bg-main v-font-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">月子菜单问卷</block>
		</cu-custom>
		<view class="question-type">
			基本信息
		</view>
		<form @submit="formSubmit">
		<view class="" style="font-size: 30upx;padding: 20px 30px;">
			<view class="flex margin-bottom">
				<text>产妇姓名</text>
				<view class="question-items" >
					<input v-model="addForm.maternalName" name="maternalName" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="flex margin-bottom">
				<text>手机号码</text>
				<view class="question-items" >
					<input v-model="addForm.maternalMobile" name="maternalMobile" placeholder="请输入手机号码" />
				</view>
			</view>
			<view class="flex margin-bottom">
				<text>民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族</text>
				<view class="question-items flex" >
					<input v-model="addForm.maternalNation" name="maternalNation" placeholder="请选择民族" />
					<button class="cu-btn round v-bg-main v-font-white" @click="onShowNation" style="width: 220upx;">选择民族</button>
				</view>
			</view>
			<view class="flex margin-bottom">
				<text>检测地点</text>
				<view class="question-items flex" >
					<input v-model="addForm.address" disabled name="address" placeholder="请选择检测地点" />
					<button class="cu-btn round v-bg-main v-font-white" @click="onShowAddress" style="width: 220upx;">选择地点</button>
				</view>
			</view>
			<view class="flex margin-bottom">
				<text>分娩日期</text>
				<view class="question-items flex" >
					<input v-model="addForm.deliveryDay" disabled name="deliveryDay" placeholder="请输入分娩日期" />
					<button class="cu-btn round v-bg-main v-font-white" @click="onShowDatePicker" style="width: 220upx;">选择日期</button>
				</view>
			</view>
			<view class="flex margin-bottom">
				<text>分娩方式</text>
				<view class="question-items" >
					<radio-group @change="deliveryTypechange">
						<radio id="deliveryType-0" class="radios" color="#F24573" style="transform:scale(0.8);" value="0"></radio><label class="margin-lr-xs" for="deliveryType-0">顺产</label>
						<radio id="deliveryType-1" class="radios" color="#F24573" style="transform:scale(0.8);" value="1"></radio><label class="margin-lr-xs" for="deliveryType-1">剖腹产</label>
					</radio-group>
				</view>
			</view>
			<view class="flex margin-bottom">
				<text>喂养方式</text>
				<view class="question-items" >
					<radio-group @change="feedTypeChange">
						<radio id="feedType-0" class="radios" color="#F24573" style="transform:scale(0.8);" value="0"></radio><label class="margin-lr-xs" for="feedType-0">母乳</label>
						<radio id="feedType-1" class="radios" color="#F24573" style="transform:scale(0.8);" value="1"></radio><label class="margin-lr-xs" for="feedType-1">奶粉</label>
					</radio-group>
				</view>
			</view>
			<view class="flex">
				<text>口味禁忌</text>
				<view class="" style="padding-left: 40upx;width: 220px;padding-bottom: 10upx;">
					<checkbox-group @change="avoidFoodChange">
						<view class="grid margin-bottom col-3 index-shadow" style="font-size: 26upx;">
							<view class="v-bg-white" style="padding: 10upx 0upx;">
								<checkbox id="avoidFood-3" class="round" color="#F24573" style="transform:scale(0.8);" value="醋"></checkbox><label class="margin-lr-xs" for="avoidFood-3">醋</label>
							</view>
							<view class="v-bg-white" style="padding: 10upx 0upx;">
								<checkbox id="avoidFood-4" class="round" color="#F24573" style="transform:scale(0.8);" value="葱"></checkbox><label class="margin-lr-xs" for="avoidFood-4">葱</label>
							</view>
							<view class="v-bg-white" style="padding: 10upx 0upx;">
								<checkbox id="avoidFood-5" class="round" color="#F24573" style="transform:scale(0.8);" value="虾"></checkbox><label class="margin-lr-xs" for="avoidFood-5">虾</label>
							</view>
							<view class="v-bg-white" style="padding: 10upx 0upx;">
								<checkbox id="avoidFood-0" class="round" color="#F24573" style="transform:scale(0.8);" value="香菜"></checkbox><label class="margin-lr-xs" for="avoidFood-0">香菜</label>
							</view>
							<view class="v-bg-white" style="padding: 10upx 0upx;">
								<checkbox id="avoidFood-1" class="round" color="#F24573" style="transform:scale(0.8);" value="大蒜"></checkbox><label class="margin-lr-xs" for="avoidFood-1">大蒜</label>
							</view>
							<view class="v-bg-white" style="padding: 10upx 0upx;">
								<checkbox id="avoidFood-2" class="round" color="#F24573" style="transform:scale(0.8);" value="洋葱"></checkbox><label class="margin-lr-xs" for="avoidFood-2">洋葱</label>
							</view>
							<view class="v-bg-white" style="padding: 10upx 0upx;">
								<checkbox id="avoidFood-6" class="round" color="#F24573" style="transform:scale(0.8);" value="猪肉"></checkbox><label class="margin-lr-xs" for="avoidFood-6">猪肉</label>
							</view>
							<view class="v-bg-white" style="padding: 10upx 0upx;">
								<checkbox id="avoidFood-7" class="round" color="#F24573" style="transform:scale(0.8);" value="羊肉"></checkbox><label class="margin-lr-xs" for="avoidFood-7">羊肉</label>
							</view>
							<view class="v-bg-white" style="padding: 10upx 0upx;">
								<checkbox id="avoidFood-8" class="round" color="#F24573" style="transform:scale(0.8);" value="内脏"></checkbox><label class="margin-lr-xs" for="avoidFood-8">内脏</label>
							</view>
							<view class="v-bg-white flex justify-center align-center" style="padding: 10upx 0upx;">
								<text>其他</text>
							</view>
							<view class="v-bg-white" style="padding: 10upx 0upx;">
								<input v-model="addForm.other" style="border-bottom:1upx solid #000000;" placeholder=" " />
							</view>
						</view>
					</checkbox-group>
				</view>
			</view>
		</view>
		<view class="v-bg-division" style="height: 40upx;width: 100%;"></view>
		<view class="question-type">
			体质问卷
		</view>
		<view class="">
			<view class="" style="padding: 40upx;">
				<block v-for="(item,index) in data" :key="index">
					<view class="flex align-center" >
						<text style="font-size: 30upx;width: 30upx;">●</text><text style="font-size: 40upx;">{{item.name}}</text>:
					</view>
					<view class="" style="border-bottom:1upx solid #E5E5E5;">
						<checkbox-group @change="checkWordsChange" :data-index="index">
							<view class="grid margin-bottom col-2 index-shadow" style="font-size: 30upx;">
								<view class="v-bg-white" style="padding: 10upx 0upx;" v-for="(items,indexs) in item.children" :key="indexs">
									<checkbox :id="items.id" class='round' color="#F24573" style="transform:scale(0.8);" :value="items.code"></checkbox><label class="margin-lr-xs" :for="items.id">{{items.name}}</label>
								</view>
							</view>
						</checkbox-group>
					</view>
				</block>
			</view>
		</view>
		<view class="" style="padding: 0upx 80upx 40upx 80upx;">
			<button style="width: 100%;" formType="submit" class="cu-btn v-bg-main lg v-font-white">提交</button>
		</view>
		</form>
		<mx-date-picker :show="showPicker" :type="types" :value="addForm.talkTime" :format="format" :show-tips="true" :show-seconds="true"
		 @confirm="onSelected" @cancel="onSelected" />
		 <w-picker mode="region" :areaCode="[]" :hideArea="true" @confirm="onConfirm" @cancel="onConfirm" ref="region" themeColor="#f00"></w-picker>
		 <w-picker v-if="famou.length!=0" mode="selector" :selectList="famou" :defaultVal="['汉族']" @confirm="onConfirms" @cancel="onConfirms" ref="famous" themeColor="#f00"></w-picker>
	</view>
</template>

<script>
	var  graceChecker = require("@/js/formValidation/graceChecker.js");
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import wPicker from "@/components/w-picker/w-picker.vue";
	
	var rule = [
		{ name: "maternalName", checkType: "notnull",  errorMsg: "姓名不能为空" },
		{ name: "maternalMobile", checkType: "phoneno",  errorMsg: "手机号输入错误" },
		{ name: "address", checkType: "notnull",  errorMsg: "地点不能为空" },
		{ name: "deliveryDay", checkType: "notnull",  errorMsg: "日期不能为空" }
	];
	export default {
		components:{
			MxDatePicker,wPicker
		},
		data() {
			return {
				loaddatasUrl: this.$profile.url + "/console/checkNote/rewrite/getDisease",
				data:[],
				showPicker: false,
				types: 'date',
				format: 'yyyy-mm-dd',
				addForm:{
					maternalName:'',
					maternalMobile:'',
					maternalNation:'汉族',
					deliveryDay:'',
					deliveryType:'',
					feedType:'',
					address:'',
					avoidFood:[],
					other:'',
					checkWords:[]
				},
				famou: [{label:"汉族",value:"汉族"},{label:"壮族",value:"壮族"},{label:"藏族",value:"藏族"},{label:"裕固族",value:"裕固族"},{label:"彝族",value:"彝族"},{label:"瑶族",value:"瑶族"},
						{label:"锡伯族",value:"锡伯族"},{label:"乌孜别克族",value:"乌孜别克族"},{label:"维吾尔族",value:"维吾尔族"},{label:"佤族",value:"佤族"},{label:"土家族",value:"土家族"},
						{label:"土族",value:"土族"},{label:"塔塔尔族",value:"塔塔尔族"},{label:"塔吉克族",value:"塔吉克族"},{label:"水族",value:"水族"},{label:"畲族",value:"畲族"},
						{label:"撒拉族",value:"撒拉族"},{label:"羌族",value:"羌族"},{label:"普米族",value:"普米族"},{label:"怒族",value:"怒族"},{label:"纳西族",value:"纳西族"},
						{label:"仫佬族",value:"仫佬族"},{label:"苗族",value:"苗族"},{label:"蒙古族",value:"蒙古族"},{label:"门巴族",value:"门巴族"},{label:"毛南族",value:"毛南族"},
						{label:"满族",value:"满族"},{label:"珞巴族",value:"珞巴族"},{label:"僳僳族",value:"僳僳族"},{label:"黎族",value:"黎族"},{label:"拉祜族",value:"拉祜族"},
						{label:"柯尔克孜族",value:"柯尔克孜族"},{label:"景颇族",value:"景颇族"},{label:"京族",value:"京族"},{label:"基诺族",value:"基诺族"},{label:"回族",value:"回族"},
						{label:"赫哲族",value:"赫哲族"},{label:"哈萨克族",value:"哈萨克族"},{label:"哈尼族",value:"哈尼族"},{label:"仡佬族",value:"仡佬族"},{label:"高山族",value:"高山族"},
						{label:"鄂温克族",value:"鄂温克族"},{label:"俄罗斯族",value:"俄罗斯族"},{label:"鄂伦春族",value:"鄂伦春族"},{label:"独龙族",value:"独龙族"},{label:"东乡族",value:"东乡族"},
						{label:"侗族",value:"侗族"},{label:"德昂族",value:"德昂族"},{label:"傣族",value:"傣族"},{label:"达斡尔族",value:"达斡尔族"},{label:"朝鲜族",value:"朝鲜族"},
						{label:"布依族",value:"布依族"},{label:"保安族",value:"保安族"},{label:"布朗族",value:"布朗族"},{label:"白族",value:"白族"},{label:"阿昌族",value:"阿昌族"}]
			}
		},
		onLoad() {
			const that = this;
			that.$http.post(that.loaddatasUrl).then(res=>{
				that.data = res.data;
			})
		},
		methods: {
			deliveryTypechange(e){
				this.addForm.deliveryType = e.detail.value;
			},
			feedTypeChange(e){
				this.addForm.feedType = e.detail.value;
			},
			onShowDatePicker() { //显示
				this.showPicker = true;
			},
			onShowAddress(){//显示
				this.$refs.region.show();
			},
			onConfirm(e){
				if(e.result){
					this.addForm.address = e.result;	
				}
				this.$refs.region.hide();
			},
			onShowNation(){
				this.$refs.famous.show();
			},
			onConfirms(e){
				if(e.result){
					this.addForm.maternalNation = e.result;	
				}
				console.log(this.addForm.maternalNation);
				this.$refs.famous.hide();
			},
			avoidFoodChange(e){
				const that = this;
				that.addForm.avoidFood = e.detail.value;
			},
			checkWordsChange(e){
				const that = this;
				var checkWords = that.addForm.checkWords;
				checkWords[e.currentTarget.dataset.index] = e.detail.value;
				that.addForm.checkWords = checkWords;
			},
			
			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					this.addForm.deliveryDay = e.value;
				}
			},
			formSubmit(e){
				const that = this;
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if(!checkRes){
				    uni.showToast({ title: graceChecker.error, icon: "none" });
					return;
				}
				if(that.addForm.deliveryType == ''){
					uni.showToast({ title: "分娩方式选项不能为空", icon: "none" });
					return;
				}
				if(that.addForm.feedType == ''){
					uni.showToast({ title: "喂养式选项不能为空", icon: "none" });
					return;
				}
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				var checkWords = [];
				if(that.addForm.checkWords.length > 0){
					for (var i = 0; i < that.addForm.checkWords.length; i++) {
						if(that.addForm.checkWords[i] && that.addForm.checkWords[i].length > 0){
							for (var j = 0; j < that.addForm.checkWords[i].length; j++) {
								checkWords.push(that.addForm.checkWords[i][j]);
							}
						}
					}
				}else{
					uni.showToast({ title: "请选择问卷答案", icon: "none" });
					return;
				}
				prevPage.$vm.addForm.questionnaire.checkWords = checkWords;
				prevPage.$vm.addForm.checkNote.maternalMobile = that.addForm.maternalMobile;
				prevPage.$vm.addForm.checkNote.maternalName = that.addForm.maternalName;
				prevPage.$vm.addForm.checkNote.deliveryDay = that.addForm.deliveryDay;
				prevPage.$vm.addForm.checkNote.maternalNation = that.addForm.maternalNation;
				prevPage.$vm.addForm.checkNote.address = that.addForm.address;
				prevPage.$vm.addForm.checkNote.deliveryType = Number(that.addForm.deliveryType);
				prevPage.$vm.addForm.checkNote.feedType = Number(that.addForm.feedType);
				var avoidFood = that.addForm.avoidFood;
				if(that.addForm.other != ''){
					avoidFood.push(that.addForm.other)
				}
				prevPage.$vm.addForm.checkNote.avoidFood = avoidFood;
				prevPage.$vm.dataList[2].content = '已填写完毕（可编辑）';
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped>
	.question-items{
		border-bottom:1upx solid #F1F1F1;
		padding-left: 40upx;
		width: 75%;
		padding-bottom: 10upx;
	}
	
	.question-type {
		height: 120upx;
		border-bottom: 1px solid #E4E4E4;
		font-size: 45upx;
		padding: 40upx 20upx 20upx 50upx;
		font-weight: 500;
	}

	radios::before,
	checkboxs::before {
		font-family: "cuIcon";
		content: "\E645";
		position: absolute;
		color: #ffffff !important;
		top: 50%;
		margin-top: -2px;
		right: -11px;
		font-size: 50rpx;
		line-height: 16px;
		pointer-events: none;
		-webkit-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
		transform: scale(1, 1);
		-webkit-transition: all 0.3s ease-in-out 0s;
		-o-transition: all 0.3s ease-in-out 0s;
		transition: all 0.3s ease-in-out 0s;
		z-index: 9;
	}
</style>
